﻿@model IEnumerable<OPM.Models.GetTimelineHeader>

@{
    ViewBag.Title = Multi.TimeLineString;
    Layout = "~/Views/Shared/_LayoutTimeline.cshtml";
    var countState = WSO.GetCountEachState(U.Token);

      string txt = "timeLineBoxRight";
    string displayBox ="";

    //var xx = WSO.GetCase(U.Token, "3C6931C7042A4560B2CC8D966DC83A46");
}

<div class="tab_new_topic2">
    <div class="new_topic2_btn floatL" id="new_topic2_btn1">

        <a href="#" onclick="filterBlock(1); return false;">
            <div class="new_topic2_btn-inner1 floatL">รายการรับ</div>
            <div class="new_topic2_btn-inner2 floatR">@countState.inbox</div>
            <div class="clear"></div>
        </a>

    </div>
    <div class="new_topic2_btn floatL" id="new_topic2_btn2">

        <a href="#" onclick="filterBlock(2); return false;">
            <div class="new_topic2_btn-inner1 floatL">งานค้าง</div>
            <div class="new_topic2_btn-inner2 floatR">@countState.processing</div>
            <div class="clear"></div>
        </a>
    </div>
    <div class="new_topic2_btn floatL" id="new_topic2_btn3">

        <a href="#" onclick="filterBlock(3); return false;">
            <div class="new_topic2_btn-inner1 floatL">แจ้งเตือน</div>
            <div class="new_topic2_btn-inner2 floatR">@countState.notify</div>
            <div class="clear"></div>
        </a>
    </div>
    <div class="new_topic2_btn floatL" id="new_topic2_btn4">

        <a href="#" onclick="filterBlock(4); return false;">
            <div class="new_topic2_btn-inner1 floatL">อยู่ในความรับผิดชอบ</div>
            <div class="new_topic2_btn-inner2 floatR"></div>
            <div class="clear"></div>
        </a>

    </div>
    <div class="clear"></div>
</div>
<div class="titleTab">
    <div class="titleTab_timeline">@Multi.TimeLineString</div>
</div>
<div class="p-Relative timeLineZone">
    <div class="p-Absolute timelineMore dNone" onclick="loadTimeline();">More</div>
    <div class="p-Absolute center-line"></div>

    
    @foreach (var list in Model)
    {
        if (txt == "timeLineBoxLeft")
        {
            txt = "timeLineBoxRight";
        }
        else
        {
            txt = "timeLineBoxLeft";
        }

        if (list.timeline_type == "I") {
            displayBox = "timeLineBox1";
        }
        else if (list.timeline_type == "P")
        {
            displayBox = "timeLineBox2";
        }
        else if (list.timeline_type == "N")
        {
            displayBox = "timeLineBox3";
        }
        else 
        {
            displayBox = "timeLineBox4";
        }
        
        
        <div class="timeLineBox p-Relative floatL dNone @displayBox @txt" data-id="@list.case_id"></div>
    }
    @*@Html.Partial("_SystemColumn")*@
</div>

<script type="text/javascript">


    function loadTimeline() {
        var step = 0;
        //var limitPage = $('.timeLineBox').length;
        var limitPage = 10;
        limitPage--;
        $(".timeLineZone div").remove('.clear');
        checkLoadTimeline = false;
        $('.timeLineZone .timeLineBox:hidden').each(function (i, item) {
            var blockid = $(this).attr('data-id');


            $.get("@Url.Content("~/Timeline/TimeLineSource")", { id: blockid })
				.done(function (data) {
				    $(".timeLineBox[data-id='" + blockid + "']").html(data).show().find("time.timeago").timeago();

				    $(".timeLineBox").eq(step).removeClass('dNone');

				    var realheight = $(".timeLineBox[data-id='" + blockid + "'] p.hideDetailBox")[0].scrollHeight;

				    if (realheight > 105) {
				        $(".timeLineBox[data-id='" + blockid + "'] p.readMoreDetailBox").show();
				    }

				    if (step == limitPage) {
				        masonry();

				    } else {
				        step++;
				    }
				});
            if (i >= limitPage) {
                return false;
            }
        });
    }

    var filterActive = 0;
    var checkAction = true;
    function filterBlock(id) {
        if (checkAction) {
            checkAction = false;
            if (filterActive != id) {
                if (id == 1) {
                    $container.isotope({ filter: '.timeLineBox1' });
                    filterActive = 1;
                } else if (id == 2) {
                    $container.isotope({ filter: '.timeLineBox2' });
                    filterActive = 2;
                } else if (id == 3) {
                    $container.isotope({ filter: '.timeLineBox3' });
                    filterActive = 3;
                } else if (id == 4) {
                    $container.isotope({ filter: '.timeLineBox4' });
                    filterActive = 4;
                }
            } else {
                $container.isotope({ filter: '*' });
                filterActive = 0;
            }

            setTimeout(function () { boxPosition(); }, 400);
            setTimeout(function () { checkAction = true; }, 1000);
        }
    }
</script>
